<template>
  <div class="setting-over-time">
    <h2>
      {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.title1')}}
      <el-switch v-model="overTimeSetting.overTimeStatus" class="switch-btn"/>
    </h2>
    <template v-if="overTimeSetting.overTimeStatus">
      {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.des1', {data1:preFlowName})}}
      <el-input
        class="w-87"
        onkeyup="if(isNaN(value))execCommand('undo')"
        v-model="overTimeSetting.overTime"
      ></el-input>
      {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.des2')}}
      <div class="setting-over-time-box">
        {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.des3')}}
        <el-select v-model="overTimeSetting.remindType" class="w-187">
          <el-option
            v-for="item in overTimeRemindTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 超时提醒指定到人 -->
        <template v-if="overTimeSetting.remindType === null">
          <template v-if="!isOpenData">
            <el-input
              class="w-187"
              :placeholder="$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.pla1')"
              readonly
              :value="fmtApproverNames(overTimeSetting.reminders)"
              @click.native="selectApproveUser('overTime')"
            />
          </template>
          <template v-else>
            <div class="setting-open-data-input block-inline w-187 mr-5" @click="selectApproveUser('overTime')">
              <template v-if="!overTimeSetting.reminders || !overTimeSetting.reminders.length"><span class="placeholder-text">{{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.pla1')}}</span></template>
              <template v-else v-for="(item, index) in overTimeSetting.reminders || []">
                <open-data
                  :key="item.staffId"
                  type="userName"
                  :openid="item.staffId"
                ></open-data>
                <ui-separator
                  :index="index"
                  :list="overTimeSetting.reminders || []"
                  :key="`${item.staffId}${uuid()}`"
                />
              </template>
            </div>
          </template>
        </template>
        {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.des4')}}
        <el-select
          class="w-87"
          v-model="overTimeSetting.isAhead"
        >
          <el-option :label="$t('common.base.before')" :value="1"> </el-option>
          <el-option :label="$t('common.base.after')" :value="0"> </el-option>
        </el-select>
        <el-input
          class="w-87"
          onkeyup="this.value=this.value.replace(/\D/g,'')"
          v-model="overTimeSetting.minutes"
        ></el-input>
        {{$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.des5')}}
      </div>
    </template>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash';
import { isOpenData } from '@src/util/platform';
import { OVER_TIME_REMIND_TYPE_OPTIONS, FLOW_MAP } from '../../../constant';
import { OverTimeSetting } from '../models/ServiceEventConfig';


import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'

export default {
  name:'over-time-setting',
  props: {
    type: {
      type: String,
      default: 'create',
    },
    overTimeSetting: {
      type: Object,
      default: () => new OverTimeSetting(),
    },
  },
  computed: {
    preFlowName() {
      if(this.type == 'allot') return this.$t('common.base.create')
      if(this.type == 'start') return this.$t('common.base.distribution') 
      if(this.type == 'finish') return this.$t('common.base.start')
    }
  },
  data() {
    return {
      flowMap: FLOW_MAP,
      isOpenData,
      overTimeRemindTypeOptions: OVER_TIME_REMIND_TYPE_OPTIONS, //  超时提醒被提醒人选择类型
    };
  },
  methods: {
    /** 处理数据抛出(未使用)*/
    updateOverTimeSetting() {
      let overTimeSetting = cloneDeep(this.overTimeSetting);
      this.$emit('change', overTimeSetting);
    },
    /** 格式化审批人员名称 */
    fmtApproverNames(reminders = []) {
      return reminders.map(item => item.displayName).join(',');
    },
    /** 选择指定审批人员 */
    selectApproveUser(type) {
      let selected = [];
      if (type === 'overTime') selected = this.overTimeSetting.reminders || [];
      if (type === 'planRemind') selected = [];

      let MAXUSERNUM = 100
      let options = {
        title: ['overTime', 'planRemind'].includes(type)
          ? this.$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.tips1')
          : this.$t('event.setting.serviceEventTypeSetting.flow.component.overTimeSetting.tips2'),
        max: MAXUSERNUM, // [选填]最大人数：当值小于等于0或者不填时，不对选择人数做限制，max值为1时单选，大于1时多选
        selectedUsers: selected, // [选填] 已选人员 每个人员必须包括userId,displayName,staffId,head这四个属性，只有带max大于1时生效
        mode: BaseSelectUserModeEnum.Filter
      };

      this.$fast.select.multi.user(options)
        .then(res => {
          if (res.status != 0) return;
          console.log(res.data.users);
          switch (type) {
          case 'overTime': // 超时审批指定人员
            this.overTimeSetting.reminders = res.data.users;
            break;
          case 'planRemind': // 计划提醒指定人员
            // this.taskTypeConfig.noticeUsers = res.data.users;
            break;
          default:
            break;
          }
        })
        .catch(err => {
          console.warn(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 企微端样式
@import '@src/modules/setting/openData.scss';

.setting-over-time{
  color: #999;
  .setting-over-time-box{
    align-items: center;
    display: flex;
    flex-flow: wrap;
    line-height: 38px;
    .el-select{
      margin: 0 5px;
    }
  }
  h2 {
    margin: 12px 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    .switch-btn {
      margin-left: 12px;
    }
    /* &:nth-of-type(1) {
      margin-top: 0;
    } */
  }

  .desc {
    margin-top: 12px;
    margin-bottom: 8px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
  }

  .link-cls {
    margin-top: 12px;
    font-size: 14px;
    color: $color-primary-light-6;
    cursor: pointer;
  }

  .flex-wrap {
    display: flex;
    line-height: 38px;
    justify-content: space-between;
    .el-select {
      margin: 0 5px;
    }
    & > * {
      flex: 1;
    }
  }

  .el-select,.el-input {
    width: 100%;
  }
  .mr-5{
    margin-right: 5px;
  }
  .w-120 {
    width: 120px;
  }
  .w-187 {
    width: 187px;
  }
  .w-87 {
    width: 87px;
  }
  .block-inline {
    display: inline-block;
  }
}
</style>
